import React, { Component } from 'react'
import { LeftOutlined, ShareAltOutlined, RightOutlined, CheckCircleOutlined, LikeOutlined, HeartOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Tabs, message } from 'antd';
import dbuy from './dbuy.module.css'
import imgUrl from './images/1_03.png'
import { withRouter } from 'react-router';
import { added } from '../../api/addLike.js'
const { TabPane } = Tabs;

function callback(key) {
    console.log(key);
}


class AddLike extends Component {
    constructor(props) {
        super(props)
        console.log(props)
        this.state = {
            size:36,
            pid:props.location.state.pid,
            uid:localStorage.uid,
            good:props.location.state
            // sizeList:[
            //     {
            //         size:'36',
            //         price:'1300'
            //     }
            // ]
        }
    }
    added(){
        let { pid, uid, size } = this.state
        uid = Number(uid)
        added({   uid,pid, size,del:0,cartid:10
        }).then(res=>{
            res.data ? message.success('成功添加至想要') : message.error('添加失败，请检查你的网络')
        })
    }
    render() {
        return (
            <div id={dbuy.dbuy}>

                <div className={dbuy.dhead}>
                    <LeftOutlined style={{ textAlign: 'left' }} onClick={()=>{window.history.back()}}/>
                    <h2>{this.state.good.pname}</h2>
                </div>

                <div className={dbuy.banner}>
                    <img src={imgUrl} />
                </div>
                <Tabs onChange={callback} type="card" style={{overflow:'scroll',height:'auto'}}>
                    <TabPane tab={
                        <span style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <i style={{ fontStyle: 'normal' }}>买全新</i><span>最低￥1688</span>
                        </span>

                    } key="1">
                        <div className={dbuy.con}>
                            <h2>
                                <span><i><CheckCircleOutlined style={{ color: 'red', marginRight: '0.1rem' }} /></i>正品保证</span>
                                <span><i><CheckCircleOutlined style={{ color: 'red', marginRight: '0.1rem' }} /></i>多重鉴别</span>
                                <span><i><CheckCircleOutlined style={{ color: 'red', marginRight: '0.1rem' }} /></i>售后无忧</span>
                            </h2>
                            <div className={dbuy.size}>
                                {/* {
                                    this.state.sizeList.map(item =>
                                        <dl>
                                            <dt>{item.size}</dt>
                                            <dd>￥{item.price}</dd>
                                        </dl>

                                    )
                                } */}
                                <dl onClick={()=>{this.state.size=36;this.setState({})}}>
                                    <dt>36</dt>
                                    <dd>￥1268</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=36.5;this.setState({})}}>
                                    <dt>36.5</dt>
                                    <dd>￥1366</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=37.5;this.setState({})}}>
                                    <dt>37.5</dt>
                                    <dd>￥1399</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=38;this.setState({})}}>
                                    <dt>38</dt>
                                    <dd>￥1268</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=38.5;this.setState({})}}>
                                    <dt>38.5</dt>
                                    <dd>￥1366</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=39;this.setState({})}}>
                                    <dt>39</dt>
                                    <dd>￥1399</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=39.5;this.setState({})}}>
                                    <dt>39.5</dt>
                                    <dd>￥1433</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=40;this.setState({})}}>
                                    <dt>40</dt>
                                    <dd>￥1469</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=40.5;this.setState({})}}>
                                    <dt>40.5</dt>
                                    <dd>￥1566</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=41;this.setState({})}}>
                                    <dt>41</dt>
                                    <dd>￥1633</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=41.5;this.setState({})}}>
                                    <dt>41.5</dt>
                                    <dd>￥1699</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=42;this.setState({})}}>
                                    <dt>42</dt>
                                    <dd>￥1732</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=42.5;this.setState({})}}>
                                    <dt>42.5</dt>
                                    <dd>￥1679</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=43;this.setState({})}}>
                                    <dt>43</dt>
                                    <dd>￥--</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=43.5;this.setState({})}}>
                                    <dt>43.5</dt>
                                    <dd>￥1469</dd>
                                </dl>
                                <dl onClick={()=>{this.state.size=44;this.setState({})}}>
                                    <dt>44</dt>
                                    <dd>￥--</dd>
                                </dl>
                            </div>
                            <div className={dbuy.foot}>
                                <button onClick={()=>{this.added()}}>
                                    <span>￥2780</span>
                                    <span>速达</span>
                                </button>
                                <button onClick={()=>{this.added()}}>
                                    <span>￥2780</span>
                                    <span>现货</span>
                                </button>
                            </div>
                        </div>

                    </TabPane>
                    <TabPane tab={
                        <span style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <i style={{ fontStyle: 'normal' }}>买预售</i><span>最低￥1980</span>
                        </span>

                    } key="2">
                        <div className={dbuy.con}>
                            <h2>
                                <span><i><CheckCircleOutlined style={{ color: 'red', marginRight: '0.1rem' }} /></i>正品保证</span>
                                <span><i><CheckCircleOutlined style={{ color: 'red', marginRight: '0.1rem' }} /></i>多重鉴别</span>
                                <span><i><CheckCircleOutlined style={{ color: 'red', marginRight: '0.1rem' }} /></i>售后无忧</span>
                            </h2>
                            <div className={dbuy.size}>
                                <ul className={dbuy.size_list}>
                                    <li>
                                        <span>{this.state.size}</span>
                                        <span>￥2749</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </TabPane>
                    <TabPane tab={
                        <span style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <i style={{ fontStyle: 'normal' }}>买二手</i><span>最低￥1788</span>
                        </span>

                    } key="3">
                        <div className={dbuy.con}>
                            <h2>
                                <span><i><CheckCircleOutlined style={{ color: 'red', marginRight: '0.1rem' }} /></i>正品保证</span>
                                <span><i><CheckCircleOutlined style={{ color: 'red', marginRight: '0.1rem' }} /></i>多重鉴别</span>
                                <span><i><CheckCircleOutlined style={{ color: 'red', marginRight: '0.1rem' }} /></i>售后无忧</span>
                            </h2>
                            <div className={dbuy.size}>
                            <dl>
                                    <dt>36</dt>
                                    <dd>￥1268</dd>
                                </dl>
                                <dl>
                                    <dt>36.5</dt>
                                    <dd>￥1366</dd>
                                </dl>
                                <dl>
                                    <dt>37.5</dt>
                                    <dd>￥1399</dd>
                                </dl>
                                <dl>
                                    <dt>38</dt>
                                    <dd>￥1268</dd>
                                </dl>
                                <dl>
                                    <dt>38.5</dt>
                                    <dd>￥1366</dd>
                                </dl>
                                <dl>
                                    <dt>39</dt>
                                    <dd>￥1399</dd>
                                </dl>
                                <dl>
                                    <dt>39.5</dt>
                                    <dd>￥1433</dd>
                                </dl>
                                <dl>
                                    <dt>40</dt>
                                    <dd>￥1469</dd>
                                </dl>
                                <dl>
                                    <dt>40.5</dt>
                                    <dd>￥1566</dd>
                                </dl>
                                <dl>
                                    <dt>41</dt>
                                    <dd>￥1633</dd>
                                </dl>
                                <dl>
                                    <dt>41.5</dt>
                                    <dd>￥1699</dd>
                                </dl>
                                <dl>
                                    <dt>42</dt>
                                    <dd>￥1732</dd>
                                </dl>
                                <dl>
                                    <dt>42.5</dt>
                                    <dd>￥1679</dd>
                                </dl>
                                <dl>
                                    <dt>43</dt>
                                    <dd>￥--</dd>
                                </dl>
                                <dl>
                                    <dt>43.5</dt>
                                    <dd>￥1469</dd>
                                </dl>
                                <dl>
                                    <dt>44</dt>
                                    <dd>￥--</dd>
                                </dl>
                            </div>

                        </div>
                    </TabPane>
                </Tabs>

            </div>
        )
    }
}
export default withRouter(AddLike)